<?php

namespace App\Admin\Controllers;

use App\Services\SwitchPortService;
use Slowlyo\OwlAdmin\Controllers\AdminController;
use App\Support\Components;

/**
 * 交换机端口查看
 *
 * @property SwitchPortService $service
 */
class SwitchPortController extends AdminController
{
	protected string $serviceName = SwitchPortService::class;

	public function list()
	{
		$crud = $this->baseCRUD()
			->filterTogglable(false)
			->headerToolbar([
				...$this->baseHeaderToolBar()
			])
			->bulkActions([
				
			])
			->columns([
				amis()->TableColumn('id', 'ID')->sortable(),
				amis()->TableColumn('port_index', '端口索引号')->sortable(),
				amis()->TableColumn('name', '端口名称'),
				amis()->TableColumn('if_alias', '接口别名'),
				amis()->TableColumn('capacity', '端口带宽(Mbps)'),
				amis()->TableColumn('remark', '备注'),
				amis()->TableColumn('state', '端口状态')->type('mapping')->map([
					1 => "<span class='label label-success'>在线</span>",
					2 => "<span class='label label-danger'>离线</span>",
				]),
				amis()->TableColumn('switch.name', '所属交换机'),
				amis()->TableColumn('updated_at', admin_trans('admin.updated_at'))->type('datetime')->sortable(),
				amis()->TableColumn('操作')->type('operation')->buttons([
					$this->portchart('dialog'),
                ]),
			]);

		return $this->baseList($crud);
	}

	/**
	 * 查看端口流量
	 * @return mixed
	 */
	public function portchart()
	{
		$action = amis()->DialogAction()
			->label('查看端口流量')
			->icon('fa-solid fa-chart-line')
			->level('info')
			->dialog(
				amis()->Dialog()
					->title('端口流量统计')
					->size('full')
					->body([
						amis()->Grid()->columns([
							amis()->GridColumn()->md(12)->body([
								// 时间范围选择
								amis()->Form()
									->id('flowchartForm')
									// 去掉边框
									->wrapWithPanel(false)
									->title('')
									->submitText('')
									->data([
										'timeRange' => '24th',
										'dataType' => '1000'
									])
									->body([
										amis()->Grid()->className('mb-4')->columns([
											amis()->GridColumn()->md(10)->body(
												amis()->ButtonGroupControl()
													->name('timeRange')
													->label('')
													->value('24th')
													->onEvent([
														'change' => [
															'actions' => [
																[
																	'actionType' => 'reload',
																	'componentId' => 'flowChart',
																	'args' => ['timeRange' => '${timeRange}']
																]
															]
														]
													])
													->options([
														['label' => '最近24小时', 'value' => '24th'],
														['label' => '今天', 'value' => 'today'],
														['label' => '最近七天', 'value' => 'last7days'],
														['label' => '本周', 'value' => 'week'],
														['label' => '上周', 'value' => 'lastweek'],
														['label' => '本月（截止当前）', 'value' => 'month'],
														['label' => '本月（完整月份）', 'value' => 'month_full'],
													])
											),
											amis()->GridColumn()->md(2)->body(
												amis()->ButtonGroupControl()
													->labelAlign('right')
													->name('dataType')
													->label('')
													->btnActiveLevel('danger')
													->value('1000')
													->onEvent([
														'change' => [
															'actions' => [
																[
																	'actionType' => 'reload',
																	'componentId' => 'flowChart',
																	'args' => ['dataType' => '${dataType}']
																]
															]
														]
													])
													->options([
														['label' => '1000', 'value' => '1000'],
														['label' => '1024', 'value' => '1024'],
													])
											)
										])
									]),
								// 流量图表
								amis()->Card()->body([
									Components::make()->trafficChart()->id('flowChart')
								])
							])
						])
					])
			);
		return $action;
	}

}